<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery中的事件绑定</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css" media="screen">
    body {
        width: 960px;
        margin: 0 auto;
        font: 18px/1.8em '微软雅黑';
    }

    h1 {
        color: green;
    }

    div {
        height: 300px;
        border: 1px red solid;
        border-radius: 5px;
    }
    </style>
    <script>
    $(function() {


        $('#eve').hover(function() {
            $(this).css('color', randomColor());
        });
        $('#eve').on('hover', function() {
            $(this).css('color', randomColor());
        });
        $("#demo").on('click', function() {
            $(this).css('backgroundColor', randomColor());
        });
        // console.log(Math.random());
        // console.log(Math.random().toString(16));
        // console.log(Math.random().toString(16).slice(2, 8));
        function randomColor() {
            return '#' + Math.random().toString(16).slice(3, 9);
        };
    });
    </script>
</head>

<body>
    <h1 id="eve">jQuery中的事件绑定</h1>
    <p>点击方框区域，随机更换背景颜色</p>
    <div id="demo"></div>
</body>

</html>